<template>
  <el-card
    body-class="!p-0 relative"
    class="!w-258px !h-auto !rounded-10px !relative !flex !flex-col border-0 !shadow-[none] transition-transform duration-500 !hover:shadow-[0_2px_12px_0_rgb(0_0_0_/_15%)]"
  >
    <div class="!flex !flex-row !justify-between !absolute bottom-3px right-4px z-1">
      <!-- <div>
        <el-button type="primary" text bg v-if="detail?.status === AiImageStatusEnum.IN_PROGRESS">
          生成中
        </el-button>
        <el-button text bg v-else-if="detail?.status === AiImageStatusEnum.SUCCESS">
          已完成
        </el-button>
        <el-button type="danger" text bg v-else-if="detail?.status === AiImageStatusEnum.FAIL">
          异常
        </el-button>
      </div> -->
      <!-- 操作区 -->
      <div class="bg-#00000080 rounded-8px operation-button">
        <el-button
          class="!p-10px !m-0 !text-#fff"
          text
          :icon="Download"
          @click="handleButtonClick('download', detail)"
        />
        <!-- <el-button
          class="!p-10px !m-0 !text-#fff"
          text
          :icon="RefreshRight"
          @click="handleButtonClick('regeneration', detail)"
        /> -->
        <el-button
          class="!p-10px !m-0 !text-#fff"
          text
          :icon="Delete"
          @click="handleButtonClick('delete', detail)"
        />
        <!-- <el-button
          class="!p-10px !m-0 !text-#fff"
          text
          :icon="More"
          @click="handleButtonClick('more', detail)"
        /> -->
      </div>
    </div>
    <div
      class="!overflow-hidden !h-258px !w-258px !flex-1"
      ref="cardImageRef"
      v-loading="detail?.status === AiImageStatusEnum.IN_PROGRESS"
      element-loading-text="生成中..."
    >
      <el-image
        v-if="detail?.picUrl"
        fit="cover"
        class="!rounded-10px wh-full"
        :src="detail?.picUrl"
        :preview-src-list="[detail.picUrl]"
        preview-teleported
      />
      <div
        class="p-20px overflow-hidden break-all"
        v-if="detail?.status === AiImageStatusEnum.FAIL"
      >
        {{ detail?.errorMessage }}
      </div>
    </div>
    <!-- Midjourney 专属操作 -->
    <div
      v-if="detail?.buttons?.length"
      class="!mt-5px !w-full !flex !flex-row !flex-wrap !justify-start"
    >
      <el-button
        size="small"
        v-for="button in detail?.buttons"
        :key="button"
        class="min-w-40px ml-0 mr-10px mt-5px"
        @click="handleMidjourneyBtnClick(button)"
      >
        {{ button.label }}{{ button.emoji }}
      </el-button>
    </div>
  </el-card>
</template>
<script setup lang="ts">
import { Delete, Download, More, RefreshRight } from '@element-plus/icons-vue'
import { ImageVO, ImageMidjourneyButtonsVO } from '@/api/ai/image'
import { PropType } from 'vue'
import { ElLoading, LoadingOptionsResolved } from 'element-plus'
import { AiImageStatusEnum } from '@/views/ai/utils/constants'

const message = useMessage() // 消息

const props = defineProps({
  detail: {
    type: Object as PropType<ImageVO>,
    require: true,
    default() {
      return {}
    }
  }
})

const cardImageRef = ref<any>() // 卡片 image ref
const cardImageLoadingInstance = ref<any>() // 卡片 image ref

/** 处理点击事件  */
const handleButtonClick = async (type, detail: ImageVO) => {
  emits('onBtnClick', type, detail)
}

/** 处理 Midjourney 按钮点击事件  */
const handleMidjourneyBtnClick = async (button: ImageMidjourneyButtonsVO) => {
  // 确认窗体
  await message.confirm(`确认操作 "${button.label} ${button.emoji}" ?`)
  emits('onMjBtnClick', button, props.detail)
}

const emits = defineEmits(['onBtnClick', 'onMjBtnClick']) // emits

/** 监听详情 */
// const { detail } = toRefs(props)
// watch(
//   () => props.detail,
//   async (newVal: any, oldVal) => {
//     await handleLoading(newVal.status as number)
//   }
// )

/** 处理加载状态 */
const handleLoading = async (status: number) => {
  // 情况一：如果是生成中，则设置加载中的 loading
  if (status === AiImageStatusEnum.IN_PROGRESS) {
    cardImageLoadingInstance.value = ElLoading.service({
      target: cardImageRef.value,
      text: '生成中...'
    } as LoadingOptionsResolved)
    // 情况二：如果已经生成结束，则移除 loading
  } else {
    if (cardImageLoadingInstance.value) {
      cardImageLoadingInstance.value.close()
      cardImageLoadingInstance.value = null
    }
  }
}

/** 初始化 */
// onMounted(async () => {
//   await handleLoading(props.detail.status as string)
// })
</script>

<style lang="scss" scoped>
.operation-button {
  backdrop-filter: blur(16px);

  :deep() {
    .el-button.is-text:not(.is-disabled):hover {
      background: #000000b8;
    }
  }
}
</style>
